import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
 *
 * @param {*} aipFunction
 * @returns   返回ref绑定给组件或者Dom元素
 */
export function observe (aipFunction) {
  // 判断组件进入视口
  const target = ref(null)

  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // targetIsVisible.value = isIntersecting
      // console.log('正在观察', isIntersecting)
      if (isIntersecting) {
        stop() // 进入视口则停止observe 并发送api请求
        aipFunction()
      }
    },
    // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    { threshold: 0 }
  )
  return {
    target
  }
}
